<div class="capabilities-properties-table">
    <ngx-datatable #componentsMetadataTable
        columnMode="flex" 
        [headerHeight]="40"  
        [rowHeight]="35" 
        [rows]="capabilitiesProperties"
        [sorts]="[{prop: 'name', dir: 'desc'}]">
        <ngx-datatable-column *ngFor="let column of capabilityPropertiesColumns" [ngSwitch]="column.prop" [resizeable]="false" 
            [draggable]="false" name={{column.name}} [flexGrow]="column.flexGrow">
            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
                <a data-tests-id="row[column.prop]" sdc-tooltip [tooltip-text]="row[column.prop]" (click)="updateProperty(row)">{{row[column.prop]}}</a>
            </ng-template>
            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'schema'">
                <span *ngIf="row[column.prop] && row[column.prop].property" data-tests-id="row[column.prop].property.type" 
                sdc-tooltip [tooltip-text]="row[column.prop].property.type">{{row[column.prop].property.type}}</span>
            </ng-template>
            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
                <span data-tests-id="row[column.prop]" sdc-tooltip [tooltip-text]="row[column.prop]" [tooltip-placement]="3">{{row[column.prop]}}</span>
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>
</div>